<template name="im-voice">
	<view class="im-voice-msg im-flex im-rows im-nowrap im-align-items-center radius-20"
	:class="[dataIndex == playIndex ? 'linear-green' : '', isSelf ? 'im-rows-reverse' : '' , ]" :data-voice="item.content" :data-index='dataIndex' 
	:style="{'width':(item.extends.duration*3)+'px'}">
		<text class="f-16 cuIcon-subscription rotate45" :class="[dataIndex == playIndex ? 'c-white' : '',isSelf ? 'rotate225' : '']"></text>
		<text class="im-voice-msg-text" :class="[dataIndex == playIndex ? 'c-white' : '']">{{item.extends.duration}} "</text> 
	</view>
</template>
<script>
export default {
	name  : "im-voice",
	props : {
		item:{type:Object, default:function(){return {};}},
		isSelf:{type:Boolean, default:false},
		playIndex:{type:Number, default:-1},
		dataIndex:{type:Number, default:0}
	},
	data() {
		return {
		}
	},
	created : function(){
	},
	methods:{
	}
}
</script>
<style lang="scss" scoped>
.im-voice-msg{height:80rpx; padding:0 20rpx; background-color:#E7F0F3; color:#2B2E3D; min-width:160rpx; max-width:400rpx;}
.im-voice-msg-text{font-size:22rpx; margin:0 5rpx;}
</style>